(function () {
    const zc = document.querySelector('.zc')
    const tel = document.querySelector('.tel')
    const cha = document.querySelector('.icon-chacha')
    const yzm = document.querySelector('.code-button')
    const phone = document.querySelector('.phone')
    const eng = document.querySelector('.num')
    const an = document.querySelector('.submit')
    const xy = document.querySelector('.icon-duigouxiao')
    const tooltip = document.querySelector('.tooltip')
    const gb = document.querySelector('.gb')
    tel.addEventListener('input', function () {
        const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        //当表单里有值的时候
        if (tel.value) {
            cha.style.display = 'block'
            //当值长度为11的时候
            if (tel.value.length === 11) {
                yzm.style.color = '#ff2442'
                //验证码亮了之后 添加点击事件
                yzm.addEventListener('click', function () {
                    //如果用户输入的值不满足正则的时候
                    if (!reg.test(tel.value)) {
                        phone.nextElementSibling.innerHTML = '发送验证码失败'
                    }
                    //当用户输入的值满足正则的时候
                    else {
                        phone.nextElementSibling.innerHTML = '已发送'
                        let i = 5
                        yzm.innerHTML = '重新发送(5s)'
                        yzm.style.color = 'rgba(255,36,66,.3)'
                        let n = setInterval(function () {
                            i--
                            yzm.innerHTML = `重新发送(${i}S)`
                            // 当定时器到0的时候
                            if (i === 0) {
                                clearInterval(n)
                                yzm.style.color = '#ff2442'
                                yzm.innerHTML = '重新发送'
                            }
                        }, 1000)
                    }
                })
            } 
            //当值长度不到11位的时候
            else {
                yzm.style.color = 'rgba(255,36,66,.3)'
            }
        }
        //当表单里没值的时候
        else {
            cha.style.display = 'none'
            yzm.style.color = 'rgba(255,36,66,.3)'
            phone.nextElementSibling.innerHTML = ''
            yzm.innerHTML = '发送验证码'
        }

        eng.addEventListener('input', function () {
            if (eng.value.length >= 4 && tel.value.length === 11) {
                an.style.backgroundColor = '#ff2442'
                an.style.color = '#fff'

            } else {
                an.style.backgroundColor = 'rgba(0, 0, 0, 0.04)'
                an.style.color = '#333'
            }
        })
    })

    let flag = true
    xy.addEventListener('click', function () {
        if (flag) {
            xy.style.opacity = '1'
            flag = false
            // an.disabeld = true
            tooltip.style.opacity = '0'

        } else {
            xy.style.opacity = '0'
            flag = true
        }
    })

    an.addEventListener('click', function () {
        if (!flag && eng.value.length >= 4 && tel.value.length === 11) {
            // 点击登录要跳转的网址写到这
            location.href = "../HTML/denglu.html"
            
        }else if(flag){
           tooltip.style.opacity = '1'
        }else {
            return
        }
         
    })
    
    cha.addEventListener('click',function(){
        tel.value = ''

    })
    gb.addEventListener('click',function(){
        zc.style.opacity = '0'
        zc.style.zIndex='-1'
    })

})();



